
<!DOCTYPE html>
<html lang="">
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script>
        //设置学生对象数组,添加数据
        var studs = [{
              
                name: '张三',
                age: 20,
                sex: '男',
                marriage: '未婚'


            },
            {
             
                name: '李四',
                age: 23,
                sex: '男',
                marriage: '未婚'
            },
            {
              
                name: '啊影',
                age: 17,
                sex: '男',
                marriage: '未婚'
            }, {
              
                name: '小彭',
                age: 18,
                sex: '男',
                marriage: '未婚'
            }, 
        ];
 
        //设置表格的表头数据
        var tablehead = [ "姓名", "年龄", "性别", '婚否'];
        //将每个学生对象的属性提取出来
        var studsattribute = [ "name", "age", 'sex', 'marriage'];
        //创建各种标签
        function init() {
            //创建body标签
            var body = document.body;
            //创建第一个div标签container
            var container = document.createElement("div");
            //将container加入到body中去
            body.appendChild(container);
            //创建第二个div标签row
            var row = document.createElement("div");
            //设置row的属性
            row.setAttribute("class", "row");
            //将row加入到container中去
            container.appendChild(row);
            //创建第三个div标签col
            var col = document.createElement("div");
            //设置col的属性
            col.setAttribute("class", "col-md-12");
            //将col加入到row中去
            row.appendChild(col);
 
            //最终返回col
            return col;
 
        }
 
        //创建表格
        function inittable(col) {
            var table = document.createElement("table");

          

            //将table加到col中去
            col.appendChild(table);
            //设置table的属性
            table.setAttribute("width", "600" );
            table.setAttribute("border", "1" );
            table.setAttribute("cellspacing", "0" );
            table.setAttribute("cellpadding", "0" );
            //创建第一个tr标签存储第一行的数据
            var tr_head = document.createElement("tr");
            //将第一个tr加入到table中去
            table.appendChild(tr_head);
            //使用for循环将表头数据tr_head加到第一个tr中去,第一行中有四个数据
            for (var i = 0; i < tablehead.length; i++) {
                //创建td存储数据
                var th = document.createElement("th");
                //设置th的属性
                th.setAttribute("class", "text-center");
                //将数据加进th
                th.innerHTML = tablehead[i];
                //将th加入到tr中去
                tr_head.appendChild(th);
            }
            //使用for循环将学生对象加入到table中去
            for (var k = 0; k < studs.length; k++) {
                //有多少个学生对象就生成多少个tr
                var tr = document.createElement("tr");
                //将tr加入到table中去
                table.appendChild(tr);
                //使用for循环将学生信息加入到tr中去
                for (var j = 0; j < studsattribute.length; j++) {
                    //生成td用于存储数据
                    var td = document.createElement("td");
                    //设置td的属性
                    td.setAttribute("class", "text-center");
                    //插入数据
                    td.innerHTML = studs[k][studsattribute[j]];
                    tr.appendChild(td);
                }
 
            }
        }
        window.onload = function() {
           var col=init();
            inittable(col);
        }

        var arr = [
        ["姓名", "年龄", "性别", "婚否"],
        ["张三", 20, "男", "未婚"],
        ["李四", 23, "男", "未婚"],
        ["阿信", 17, "男", "已婚"],
        ["小彭", 18, "女", "未婚"]

        ]

        var str =  '<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1"> '


        for(var i = 0; i<arr.length; i++){
            str += '<tr>'
            for( var j = 0; j<arr[i].length; j++){
                str +=  '<td >  ' + arr[i][j] + '</td>'
            }
            str += '<tr>'
         
        }
        str += '</ table>'


        document.write(str)
    </script>
</head>
 
<body>
 
</body>
 
</html>